<div dDropDown appendToBody [appendToBodyDirections]="['leftDown','leftUp','rightDown','rightUp']"
  [closeScope]="'blank'">
  <div dDropDownToggle class="theme-toggle">
    {{'themePicker.theme'|translate}}
    <div class="theme-block">
      <span class="brand-color"></span>
      <span class="background-color"></span>
    </div>
  </div>
  <div dDropDownMenu class="theme-menu">
    <d-tabs type="tabs" [(activeTab)]="activeThemeType" (activeTabChange)="activeTabChange($event)">
      <d-tab id="devuiTheme" title="{{'themePicker.default'|translate}}">
        <section>
          <div class="title">{{'themePicker.color'|translate}}</div>
          <div class="content theme-color">
            <div class="theme-brand" *ngFor="let themePref of ['devui','green']" [ngStyle]="{
                  backgroundColor:themes[themePref+'-light-theme']?.data?.['devui-brand']
                }" (click)="themePrefixChange(themePref)">
              <ng-container *ngIf="themePref===themePrefix">
                <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" class="devui-checkbox-tick">
                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <polygon fill-rule="nonzero"
                      points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043"
                      class="devui-tick"></polygon>
                  </g>
                </svg>
              </ng-container>
            </div>
          </div>
        </section>
        <section>
          <div class="title">{{'themePicker.mode'|translate}}</div>
          <div class="content">
            <d-radio-group class="theme-select-radio" [(ngModel)]="themeMode" [ngModelOptions]="{standalone: true}"
              (change)="themesChange()">
              <d-radio [value]="'light'" [disabled]="themePrefersColorScheme">
                {{'themePicker.light'|translate}}
              </d-radio>
              <d-radio [value]="'dark'" [disabled]="themePrefersColorScheme">
                {{'themePicker.dark'|translate}}
              </d-radio>
            </d-radio-group>
            <div class="prefers-color-scheme">
              <d-toggle class="theme-follow-toggle" [(ngModel)]="themePrefersColorScheme"
                (ngModelChange)="themePrefersColorSchemeChange($event)"></d-toggle>
              <span>{{'themePicker.follow'|translate}}</span>
            </div>
            <div>
              <d-toggle class="theme-follow-toggle" [(ngModel)]="largeFontSizeMode"
                (ngModelChange)="themeFontSizeChange()"></d-toggle>
              <span>{{'themePicker.largeSize'|translate}}</span>
            </div>
          </div>
        </section>
      </d-tab>
      <d-tab id="advancedTheme" title="{{'themePicker.extend'|translate}}">
        <div style="width:180px;margin:0 auto">
          <div *ngFor="let item of advancedThemeList" class="extend-theme-image"
            [style.background-image]="'url('+item.url+')'" (click)="advancedThemeChange(item.value)">
            <span class="extend-theme-title" [style.color]="item.value==='infinity' ? '#252b3a' : null">
              {{'themePicker.'+item.value|translate}}
            </span>
            <i *ngIf="currentAdvancedTheme===item.value" class="icon-right active-theme"></i>
          </div>
        </div>
      </d-tab>
    </d-tabs>
  </div>
</div>
